const CracoAlias = require('craco-alias'); // 导入craco-alias插件
const CracoLessPlugin = require('craco-less'); // 导入craco-less插件

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
          // 设置 publicPath
          webpackConfig.output.publicPath = process.env.NODE_ENV === 'production' ? '/shopapp/' : '/';
          return webpackConfig;
        }
    },
    plugins: [
        {
            plugin: CracoAlias, // 使用craco-alias插件
            options: {
                source: 'jsconfig', // source的作用是告诉craco-alias从哪个文件读取配置
                baseUrl: './', // baseUrl的作用是告诉craco-alias项目根目录
                jsConfigPath: './jsconfig.json', // jsConfigPath的作用是告诉craco-aliasjsconfig.paths.json文件路径
            },
        },
        {
            plugin: CracoLessPlugin, // 使用craco-less插件
            options: {
                lessLoaderOptions: {
                    // lessLoaderOptions的作用是告诉craco-less如何加载less文件
                    lessOptions: {
                        javascriptEnabled: true, // 启用javascript
                        modifyVars: {
                            '@primary-color': '#1DA57A', // 修改主题色
                        },
                    },
                },
            },
        },
    ],
    devServer: {
        port: 4000, // 端口号
        open: true, // 自动打开浏览器
        historyApiFallback: true, // 解决路由404问题
        proxy: {
            '/api/': {
                target: 'https://www.luxspace.cn:37340/',
                changeOrigin: true,
            },
        },
    },
};
